{% load i18n %}
{% load promgen %}
<div id="ajax-clause-check" class="panel panel-info">
  <div class="panel-heading">Query Result</div>
  <div class="panel-body">
  <p>Query Duration: {{ duration }}</p>
  <p><code>{{ query }}</code></p>
{% if collapse %}
<a class="btn btn-success btn-sm" role="button" data-toggle="collapse" href="#prometheus-query-results" aria-expanded="false" aria-controls="collapseExample">
  Show {{ data.result|length }} Results
</a>
{% endif %}
</div>
{% if data.result %}
    <table id="prometheus-query-results" class="table table-condensed table-scroll {% if collapse %}collapse{% endif %}">
      <tr class="{{ status }}">
        <th>Timestamp</th>
        <th>Value</th>
        <th>Metric</th>
      </tr>
{% for row in data.result %}
      <tr>
        <td>{{ row.value.0 | strftime:"%Y-%m-%d %H:%M" }}</td>
        <td>{{ row.value.1 }}</td>
        <td>{{ row.metric }}</td>
      </tr>
{% endfor %}
    </table>
{% endif %}

{% if errors %}
    <table class="table table-condensed">
      <tr class="{{ status }}">
        <th>Error</th>
        <th>Message</th>
      </tr>
{% for error, message in errors.items %}
      <tr>
        <td>{{ error }}</td>
        <td>{{ message }}</td>
      </tr>
{% endfor %}
  </table>
{% endif %}
</div>
